<template>
  <div>
    <a-modal
      v-model:open="open"
      title="腐蚀机理确认"
      @ok="handleOk"
      @cancel="handleClose"
      width="750px"
    >
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="confirmLoading" @click="handleOk"
          >确认</a-button
        >
      </template>
      <div style="margin: 10px">
        <a-table bordered :dataSource="dataSource" :columns="columns" align="center">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'isMainMechanism'">
              <a-radio-group v-model:value="record.isMainMechanism">
                <a-radio :value="0">是</a-radio>
                <a-radio :value="1">否</a-radio>
              </a-radio-group>
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, defineEmits, watch, onMounted } from 'vue'
import { mechanism } from '@/assets/api/corrosion-api.js'
import { message } from 'ant-design-vue'
const emit = defineEmits(['closeDialog'])
const props = defineProps({
  isVisible: Boolean,
  corrosionSonData: Array
})
const confirmLoading = ref(false)
const open = ref(false)
const columns = ref([
  {
    title: '腐蚀机理',
    dataIndex: 'corrosionMechanism',
    key: 'corrosionMechanism',
    align: 'center'
  },
  {
    title: '是否主要腐蚀机理',
    dataIndex: 'isMainMechanism',
    key: 'isMainMechanism',
    align: 'center'
  }
])
const dataSource = ref([])

watch(
  () => props.isVisible,
  () => {
    open.value = props.isVisible
  }
)
watch(
  () => props.corrosionSonData,
  () => {
    props.corrosionSonData.forEach((item) => {
      item.isMainMechanism = Number(item.isMainMechanism)
    })
    dataSource.value = props.corrosionSonData
  }
)

const handleOk = () => {
  confirmLoading.value = true
  mechanism(dataSource.value).then((res) => {
    if (res.success) {
      confirmLoading.value = false
      message.success('确认成功！')
      open.value = false
      emit('closeDialog', false)
    } else {
      confirmLoading.value = false
      message.error(res.error)
    }
  })
}
function handleCancel() {
  open.value = false
  emit('closeDialog', false)
}
function handleClose() {
  open.value = false
  emit('closeDialog', false)
}
onMounted(() => {
  console.log(props.corrosionSonData, '0000')
})
</script>
<style scoped lang="sass"></style>
